<template>
    <div class="shop-info">
        <!--小球-->
        <transition 
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="goodsCarBoll" v-show="bollFlag" ref="ball"></div>
        </transition>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-swipe :auto="4000">  
                        <mt-swipe-item v-for="item in swipeList" :key="item.id">
                            <img :src="item.src" alt="">
                        </mt-swipe-item>  
                    </mt-swipe> 
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">{{ parameter.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="shop-price">
                        市场价：<span>￥{{ parameter.market_price }}</span>
                        销售价：<span>￥{{ parameter.sell_price }}</span>
                    </p>
                    <div class="shop-numbox">
                        购买数量：
                        <carCount @getChlidNum="getShopNum" :maxNum="parameter.stock_quantity"></carCount>
                    </div>
                    <mt-button type='primary' size='small'>立即购买</mt-button>
                    <mt-button type='danger' size='small' @click="addCar()">加入购物车</mt-button>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ parameter.goods_no }}</p>
                    <p>库存情况：{{ parameter.stock_quantity }}</p>
                    <p>上架时间：{{ parameter.add_time | DateFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <!--使用编程式导航跳转页面-->
                <mt-button type='primary' size='large' plain @click="goodsInfo">图文介绍</mt-button>
                <mt-button type='danger' size='large' plain @click="goodsTalk">商品评论</mt-button>
            </div>
        </div>
			
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    //导入mui组件js
    import mui from'../../lib/mui/js/mui.min.js'
    //导入计算商品数量组件
    import carCount from'../subComment/carCount.vue'
import { setInterval } from 'timers';
    export default {
        data() {
            return {
                id:this.$route.params.id, //将获取到url上的id挂载到data，方便后面调用
                swipeList:[],
                parameter:{},//用于接收当前商品的参数对象
                bollFlag: false,
                shopNum: 1,//初始化商品的数量
            }
        },
        created() {
            this.getSwipe();
            this.getParameter();
        },
        mounted(){
            mui('.mui-numbox').numbox();//页面dom元素全部加载完成在调用
        },
        methods: {
            //获取轮播图数据
            getSwipe(){
                this.$http.get('api/getthumimages/'+this.id).then(resule =>{               
                    if(resule.body.status === 0){
                        this.swipeList = resule.body.message;                   
                    }else{
                        Toast({
                            message: '获取轮播图失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                })
            },
            //获取商品参数区，价格，标题等数据
            getParameter(){
                this.$http.get('api/goods/getinfo/'+this.id).then(result =>{
                    if(result.body.status === 0){
                        this.parameter = result.body.message[0];
                    }else{
                        Toast({
                            message: '获取轮播图失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
            },

            //使用编程式导航进行跳转
            goodsInfo(){
                this.$router.push({ name:'goodsInfo',query:{ id:this.id } });
            },
            goodsTalk(){
                this.$router.push({ name:'goodsTalk',query:{ id:this.id } });
            },

            //点击购物车实现小球运动动画
            addCar(){
                this.bollFlag = !this.bollFlag;

                //手动创建一个要存入vuex中的公共数据对象
                var shopPublic = {
                    id: this.id,
                    count: this.shopNum,
                    sellPrice: this.parameter.sell_price,
                    selected: true,
                }

                this.$store.commit('addGoodsCar', shopPublic);
            },
            beforeEnter(el){
                el.style.transform = "translate(0, 0)";
            },
            enter(el, done){
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                const carNumPosition = document.getElementById("car_num").getBoundingClientRect();

                const xPosition = carNumPosition.left - ballPosition.left;
                const yPosition = carNumPosition.top - ballPosition.top;

                el.style.transform = "translate("+xPosition+"px, "+yPosition+"px)";
                el.style.transition = "transform 1s cubic-bezier(.59,.12,.75,.6)";
                setInterval(function(){
                    done();
                },950);      
            },
            afterEnter(el){
                this.bollFlag = !this.bollFlag;
            },

            //获取数量选择框中的值
            getShopNum(_num){
                this.shopNum = _num;
            }
            
        },
        components:{
            carCount
        },
    }
</script>

<style lang="less" scoped>
    .mint-swipe{
        height: 200px;    
        text-align: center; 
        img{
            width: auto;
            height: 100%;
        }
          
    }
    .mui-card{
        .shop-price{
            span{
                &:first-of-type{
                    text-decoration: line-through;
                    padding-right: 10px;
                }
                &:last-of-type{
                    font-size: 15px;
                    color: red;
                }
            }
        }
        .shop-numbox{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #8f8f94;
        }
        .mui-numbox{
            height: 30px;     
        }
        .mui-card-content-inner{
            color: #8f8f94;
        }
        .mui-card-footer{
            display: block;
            .mint-button{
                width: 100%;
                margin-bottom: 14px;
                &:last-of-type{
                    margin-bottom: 0;
                }
            }
        }
    }

    body{
        position: relative;
    }
    .goodsCarBoll{
        position: absolute;
        top:365px;
        left: 151px;
        width: 16px;
        height: 16px;
        background-color: red;
        z-index: 100;
        border-radius: 50%;     
    }
</style>
